﻿
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery响应式可拖拽的元素组件网格布局插件</title>
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/bootstrap3.3.5/css/bootstrap.css">
    <link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css" />
    <link rel="stylesheet" href="gridstack.css" />
    <style type="text/css">
        .grid-stack {
            background: lightgoldenrodyellow;
        }

        .grid-stack-item-content {
            color: #2c3e50;
            text-align: center;
            background-color: #18bc9c;
        }
    </style>
    <!--[if IE]>
            <script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
        <![endif]-->
</head>
<body>
    <div class="jq22-container">
        <header class="jq22-header">
            <h1>jQuery响应式可拖拽的元素组件网格布局插件 <span>A jQuery plugin for widget layout</span></h1>
            <div class="jq22-demo center">
                <a href="index.html" class="current">float</a>
                <a href="knockout.html">knockout</a>
                <a href="knockout2.html">knockout2</a>
                <a href="nested.html">nested</a>
                <a href="serialization.html">serialization</a>
            </div>
        </header>
        <div class="jq22-content bgcolor-3">
            <div class="container-fluid">
                <h1>Float grid demo</h1>
                <div>
                    <a class="btn btn-default" id="add-new-widget" href="#">Add Widget</a>
                </div>
                <br />
                <div class="grid-stack">
                </div>
            </div>
        </div>
    </div>
    <script src="../jquery-1.11.2.min.js"></script>
    <script src="jqueryui.js"></script>
    <script src="lodash.js"></script>
    <script src="gridstack.js"></script>
    <script type="text/javascript">
        $(function () {
            var options = {
                float: true
            };
            $('.grid-stack').gridstack(options);

            new function () {
                this.items = [
                    {x: 0, y: 0, width: 2, height: 2},
                    {x: 3, y: 1, width: 1, height: 2},
                    {x: 4, y: 1, width: 1, height: 1},
                    {x: 2, y: 3, width: 3, height: 1},
//                    {x: 1, y: 4, width: 1, height: 1},
//                    {x: 1, y: 3, width: 1, height: 1},
//                    {x: 2, y: 4, width: 1, height: 1},
                    {x: 2, y: 5, width: 1, height: 1}
                ];

                this.grid = $('.grid-stack').data('gridstack');

                this.add_new_widget = function () {
                    var node = this.items.pop() || {
                                x: 12 * Math.random(),
                                y: 5 * Math.random(),
                                width: 1 + 3 * Math.random(),
                                height: 1 + 3 * Math.random()
                            };
                    this.grid.add_widget($('<div><div class="grid-stack-item-content" /><div/>'),
                        node.x, node.y, node.width, node.height);
                }.bind(this);

                $('#add-new-widget').click(this.add_new_widget);
            };
        });
    </script>
</body>
</html>